body {
    background-color: #00B156;
}
div {
    display: flex;
    justify-content: space-around;
    margin: 60px auto;
    width: 460px;
    height: 360px;
    background-color: #00B156;
}
div ul {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around;
    align-items: center;
}
div ul li {
    display: inline-flex;
    width: 100px;
    height: 100px;
    background-color: #faebcc;
    border-radius: 5px;
}
li span {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 99999px;
    background-color: #ff0000;
}

li:nth-child(1) {
    justify-content: center;
    align-items: center;
}
li:nth-child(2) {
    justify-content: space-between;
}
li:nth-child(2) span:nth-child(2) {
    align-self: flex-end;
}
li:nth-child(3) {
    justify-content: space-between;
}
li:nth-child(3) span:nth-child(2) {
    align-self: center;
}
li:nth-child(3) span:nth-child(3) {
    align-self: flex-end;
}
li:nth-child(4) {
    justify-content: space-between;
}
li:nth-child(4) p {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
li:nth-child(5) {
    justify-content: space-between;
}
li:nth-child(5) p {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
li:nth-child(5) p:nth-child(2) {
    justify-content: center;/*第一种居中方式*/
    /*align-self: center;     /*第二种居中方式*/
}
li:nth-child(6) {
    justify-content: space-between;
}
li:nth-child(6) p {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}